<template>
  <div class="i18n">
    <el-dropdown trigger="click" @command="commandLang">
      <el-button type="default">
        {{ lang }}
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="Chinese">中文</el-dropdown-item>
          <el-dropdown-item command="English">English</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { localCache } from '@/utils/Cache'
import emitter from '@/utils/bus'
const lang = ref(localCache.getCache('lang') ? localCache.getCache('lang') : '中文')
let $this: any = getCurrentInstance()?.appContext.config.globalProperties

const commandLang = (command: any) => {
  if (command == 'Chinese') {
    localCache.setCache('lang', 'zh-cn')
    lang.value = localCache.getCache('lang')
    $this.$i18n.locale = 'zh-cn'
    emitter.emit('autoLang', 'zh-cn')
  }
  if (command == 'English') {
    localCache.setCache('lang', 'en')
    lang.value = localCache.getCache('lang')
    $this.$i18n.locale = 'en'
    emitter.emit('autoLang', 'en')
  }
}
</script>

<style lang="less" scoped></style>
